<!-- index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 聊天室</title>
    <style>
        .chat-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

        .message-container {
            height: 400px;
            border: 1px solid #ccc;
            overflow-y: auto;
            margin-bottom: 20px;
            padding: 10px;
        }

        .input-container {
            display: flex;
            gap: 10px;
        }

        input[type="text"] {
            flex: 1;
            padding: 8px;
        }

        button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        .message {
            margin: 5px 0;
            padding: 5px;
            border-radius: 5px;
        }

        .system-message {
            background-color: #f0f0f0;
            color: #666;
        }

        .user-message {
            background-color: #e3f2fd;
        }
    </style>
</head>
<body>
<div class="chat-container">
    <h2>WebSocket 聊天室</h2>
    <div class="message-container" id="messageContainer"></div>
    <div class="input-container">
        <input type="text" id="messageInput" placeholder="输入消息...">
        <button onclick="sendMessage()">发送</button>
    </div>
</div>

<script>
    // 生成随机用户ID
    const clientId = 'user_' + Math.random().toString(36).substr(2, 9);
    console.log(clientId)
    let ws;

    function connectWebSocket() {
        // 连接WebSocket服务器
        ws = new WebSocket(`ws://localhost:8000/ws/${clientId}`);

        ws.onopen = function () {
            addMessage('系统', '连接成功！', true);
        };

        ws.onmessage = function (event) {
            const data = JSON.parse(event.data);
            addMessage(data.client_id, data.message);
        };

        ws.onclose = function () {
            addMessage('系统', '连接已断开，正在重新连接...', true);
            // 断开后尝试重新连接
            setTimeout(connectWebSocket, 3000);
        };

        ws.onerror = function (error) {
            addMessage('系统', '连接错误：' + error.message, true);
        };
    }

    function sendMessage() {
        const input = document.getElementById('messageInput');
        const message = input.value.trim();

        if (message && ws.readyState === WebSocket.OPEN) {
            ws.send(message);
            input.value = '';
        }
    }

    /**
     * 向指定的消息容器中添加消息
     *
     * 此函数用于在HTML页面上的消息容器元素中插入新的消息它可以区分系统消息和用户消息，
     * 并通过不同的CSS类来标记它们这允许页面根据消息类型以不同的方式显示消息
     *
     * @param {string} sender 发送者的名字，用于标识消息的来源
     * @param {string} message 消息的内容
     * @param {boolean} isSystem 指示消息是否为系统消息的标志，默认为false
     */
    function addMessage(sender, message, isSystem = false) {
        // 获取消息容器元素
        const container = document.getElementById('messageContainer');

        // 创建一个新的消息div元素
        const messageDiv = document.createElement('div');

        // 根据消息是否为系统消息，设置相应的CSS类名
        messageDiv.className = `message ${isSystem ? 'system-message' : 'user-message'}`;

        // 设置消息的内容格式为“发送者: 消息内容”
        messageDiv.textContent = `${sender}: ${message}`;

        // 将新创建的消息元素添加到消息容器中
        container.appendChild(messageDiv);

        // 滚动消息容器到底部，以显示最新添加的消息
        container.scrollTop = container.scrollHeight;
    }

    // 监听回车键
    document.getElementById('messageInput').addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });

    // 初始化连接
    connectWebSocket();
</script>
</body>
</html>
